<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            width: 100%;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }

        .light {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin: 20px;
        }

        .red {
            background-color: red;
        }

        .green {
            background-color: green;
        }

        .yellow {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="container traffic-lights">
        <div class="light red"></div>
        <div class="light green"></div>
        <div class="light yellow"></div>
    </div>

    <div class="container">
        <div class="time"></div>
    </div>

    <script type="module">
        import { TrafficLights } from "./16-traffic-lights.js";
        const light = new TrafficLights([
            { color: "red", lasts: 3000 },
            { color: "green", lasts: 5000 },
            { color: "yellow", lasts: 2000 },
        ]);
        const trafficLight = document.querySelector(".traffic-lights");
        const time = document.querySelector(".time");

        function update() {
            const current = light.getCurrentLight();
            trafficLight.className = `traffic-lights ${current.color}`;
            time.textContent = current.remain;
        }
        update();

        function raf(){
            requestAnimationFrame(()=>{
                raf();
                update();
            })
        }
        raf()
    </script>
</body>

</html>